<template>
    <div>
        <minbar title="登录" />
        <div class="form_field">
        	<div class="form_field_item"><input type="text" class="form_field_input" placeholder="请输入手机号"></div>
        	<div class="form_field_item">
        		<input :type="type" class="form_field_input" style="padding-right: 80px;" placeholder="密码">
        		<image v-if="!isShowPass" @click="passStatus" resize="stretch" src="https://github.com/yuxuemei/react-music-player/blob/master/app/images/hide_password.png?raw=true" class="hide_password"></image>
                <image v-if="isShowPass" @click="passStatus" resize="stretch" src="https://github.com/yuxuemei/react-music-player/blob/master/app/images/display_password.png?raw=true" class="display_password"></image>
        	</div>
            <text class="forget_a text_right"  @click="enterPage('/forget')">忘记密码？</text>
        	<wxc-button text="登录" @wxcButtonClicked="wxcButtonClicked" :btnStyle="btnstyle"></wxc-button>
        	<text class="forget_a text_center" @click="enterPage('/register')">没有账号，去注册></text>
        </div>
     </div>
</template>
<script>
import Minbar from "./../../components/minbar.vue"
import { WxcButton } from 'weex-ui'
import mixins from './../../mixins'
export default{
	mixins:[mixins],
	data:function(){
    	return{
    		btnstyle:{
	        	backgroundColor:'#f59800',
	        	color:'#fff',
	        	width:'680px',
	        	marginTop:'40px',
	        	marginBottom:'20px',
	        	marginLeft:'35px'
	        },
	        isShowPass:false,
	        type:'password'
    	}
    },
	components:{ Minbar,WxcButton },
    methods:{
	        wxcButtonClicked:function(e){
	            console.log(e)
	        },
	        enterPage(url) {
		        this.jump(url);
		    },
		    passStatus(){
	        	this.isShowPass = !this.isShowPass;
	        	if(this.isShowPass){
	        		this.type = "text";
	        	}else{
	        		this.type="password";
	        	}
	        }
	    }
	}
</script>
<style scoped>
	.form_field_item{
       margin-top: 25px;
	}
	.form_field_input{
		border-width: 1px;
		border-style: solid;
		border-color: #ddd;
		border-radius: 10px;
		height: 70px;
		line-height: 70px;
		width: 680px;
		margin-left: 35px;
		margin-right: 35px;
		padding-left: 10px;
	}
	.forget_a{
		color: #f59800;
		text-decoration: underline;
		margin-top: 15px;
		margin-right: 35px;
		font-size: 24px;
	}
	.text_center{
	    text-align: center;
	}
	.text_right{
	    text-align: right;
	}
</style>